<template>
  <div class="carousel-warp">
    <ul class="carousel-list transition">
      <li v-for="i in 5" :key="i" class="carousel-item" @click="message(i)">测试001-{{ i }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  mounted() {
    const $el = this.$el
    const $ul = $el.querySelector('.carousel-list')
    $ul.style.top = 0 + 'px'
    function topOne() {
      $ul.style.top = -40 + 'px'
      setTimeout(() => {
        const $first = $ul.querySelector('.carousel-item:first-child')
        $ul.removeChild($first)
        $ul.className = 'carousel-list'
        $ul.style.top = 0 + 'px'
        $ul.appendChild($first)
        setTimeout(() => {
          $ul.className = 'carousel-list transition'
        }, 17)
      }, 500)
    }
    setInterval(() => {
      topOne()
    }, 2518)
  },
  methods: {
    message(i) {
      console.log(i)
    }
  }
}
</script>

<style scoped lang="less">
  .carousel-warp{
    position: relative;
    height: 40px;
    overflow: hidden;
  }
  .carousel-list{
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
  }
  .carousel-list.transition{
    transition: top .5s;
  }
  .carousel-item{
    line-height: 40px;
    height: 40px;
    box-sizing: border-box;
    font-size: 14px;
    color: #3a3c3e;
    padding: 0 15px;
    background-color: #f2f2f2;
  }
</style>
